<template lang="pug">
.app-container
  .public-search-wrap
    el-button(type="primary" class="el-icon-platform-eleme" @click="handleAdd") 添加{{addShow}}{{$t('route.name')}}

  .table
    el-table(:data="state.listData" v-loading="tableLoading" border @selection-change="handleSelectionChange" style="width: 100%;")
      el-table-column(type="selection" align="center" width="70")
      el-table-column(prop="date" label="日期" align="center" min-width="180")
      el-table-column(prop="name" label="姓名" align="center" min-width="180")

  .pagination-wrap
    .page-text 本页显示：1-20&nbsp;&nbsp;&nbsp;&nbsp;总记录数：60
    .pagination
      el-pagination(background layout="prev, pager, next, jumper" :total="total" :current-page="Number(state.pageData.page)" :page-size="state.pageData.limit" @current-change="handleCurrentChange")

  tableAdd(v-model:isDialog="addShow" v-model:dialogRecord="state.defaultData" @closeFun="handleColse")
</template>

<script setup>
import tableAdd from './tableAdd.vue'

import { ref, reactive, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

const state = reactive({
  pageData: {
    page: 1,
    limit: 20
  },
  listData: [], // 列表数据
  defaultData: {} // 列表选择的数据
})
const total = ref(60)
const tableLoading = ref(false)
const selectIds = ref('') // 列表选中的数组数据
const addShow = ref(false)

const arr = [
  { id: 1, date: '2021-06-22', name: '姓名' }
]
state.listData = arr

queryFun()

/** 收缩逻辑开始 */
function queryFun () {
  const query = proxy.$route.query
  for (const key in query) state.pageData[key] = query[key]
}
function handleCurrentChange (val) { searchRouter(val) }
function searchFun () { searchRouter(1) }
function searchRouter (val) {
  const query = Object.assign({}, state.pageData)
  for (const key in query) {
    if (!query[key] || key === 'limit') delete query[key]
  }
  query.page = val
  proxy.$router.push({ name: proxy.$route.name, query: query })
}
/** 收缩逻辑结束 */

// 选中行触发
function handleSelectionChange (val) {
  const arr = []
  val.forEach(res => {
    arr.push(res.id)
  })
  selectIds.value = arr.join(',')
  state.defaultData = val[0]
}

// 添加弹窗
function handleAdd () {
  proxy.$message({ type: 'success', message: '也是' })
  addShow.value = !addShow.value
}

// 关闭弹窗
function handleColse (val) {
  console.log('close')
}
</script>

<style lang="scss">
</style>
